<template>
    <div class="linkcard-content">
        <el-row>
            <el-col :span="14">
                <div class="custom-all">
                    <span class="custom-alert">注意</span><span class="custom-des">仅支持填写法人的私人银行卡</span>
                </div>
                <el-form ref="formRef" :rules="rules" :model="form" label-width="150px">
                    <el-form-item label="银行卡号" prop="yhkh">
                        <el-input
                            v-model.trim="form.yhkh"
                            placeholder="请填写银行卡号"
                            @blur="bankNoCheckHandler"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" prop="khyh">
                        <el-input v-model.trim="form.khyh" placeholder="根据银行卡号自动识别"></el-input>
                    </el-form-item>
                    <el-form-item label="银行预留手机号" prop="phone">
                        <el-input v-model.trim="form.phone" placeholder="请填写银行预留手机号"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="验证码"
                        prop="yzm"
                        class="item-position"
                        v-if="getCode"
                        :rules="{
                            required: getCode,
                            message: '请填写验证码',
                            trigger: 'blur'
                        }">
                        <el-input v-model.trim="form.yzm" placeholder="请填写验证码"></el-input>
                        <div class="custom-code" @click="sendMessage">{{ btnText }}</div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <div class="custom-link" @click="linkCard">确定绑卡</div>
        <!-- 点击获取验证码弹窗 -->
        <el-dialog v-model="dialog.verification" width="30%">
            <div class="dialog_verifi">
                <div>系统已发送短信至您的手机，</div>
                <div>请点击短信链接进行绑卡&emsp;&emsp;</div>
                <div class="sure_btn" @click="successHandler">我已点击短信完成绑卡</div>
                <div class="dialog_tip">
                    短信已失效，<span class="re_btn" @click="reSendNessage">重新获取短信</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import request from '@/request';
import { throttle } from '@/commons/utils';
import { ElMessage } from 'element-plus';

const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['stepChange']);
let btnText = ref('获取验证码');
let formRef = ref();
let intervalId = null;
const initSecond = 60;
let isCode = ref(true);
let currentSecond = ref(initSecond);
let form = reactive({ yhkh: '', khyh: '', phone: '', yzm: '', bankId: '' });
const dialog = reactive({
    verification: false
});
let getCode = computed(() => {
    return form.bankId == 'CMB' ? false : true;
});
let rules = reactive({
    yhkh: [{ required: true, message: '请填写银行卡号', trigger: 'blur' }],
    khyh: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
    phone: [{ required: true, message: '请填写银行预留手机号', trigger: 'blur' }]
});
const linkCard = () => {
    // 如果是招商卡需要校验验证码，非招商不用校验

    formRef.value.validate(async valid => {
        if (valid) {
            // 招行卡需要在外部绑卡
            if (form.bankId === 'CMB') {
                await request('bindPersonCardServ', {
                    pageUrl: 'https://home.shop.keyid.cn/',
                    bankName: form.khyh, //开户名称
                    bankAccount: form.yhkh, //银行卡号
                    userMobile: form.phone, //联系人手机号
                    loginNo: props.query.loginNo,
                    paySequenceNo: props.query.paySequenceNo,
                    cardBin: 'CMB'
                });
                dialog.verification = true;
            } else {
                // 非招行卡直接绑卡
                await request('bindPersonCardServ', {
                    // 可以不要
                    pageUrl: 'https://home.shop.keyid.cn/',
                    loginNo: props.query.loginNo,
                    paySequenceNo: props.query.paySequenceNo,
                    cardBin: form.bankId,
                    bankName: form.khyh, //开户名称
                    bankAccount: form.yhkh, //银行卡号
                    userMobile: form.phone, //联系人手机号
                    verifyCode: form.yzm //短信验证码
                });
                emit('stepChange');
            }
        }
    });
};
/**
 * 创建倒计时
 */
const createInterval = () => {
    intervalId = setInterval(setNewText, 1000);
};
/**
 * 执行倒计时
 */
const countdownHandler = () => {
    setNewText();
    createInterval();
};
/**
 * 设置按钮文本
 */
const setNewText = () => {
    btnText.value = `重新发送(${currentSecond.value}秒)`;
    currentSecond.value--;
    if (currentSecond.value === -1) {
        btnText.value = `获取验证码`;
        clearInterval(intervalId);
        intervalId = null;
        currentSecond.value = initSecond;
    }
};
/**
 * 发送短信
 */
const sendMessage = throttle(async () => {
    if (intervalId) return;
    // 待办：补充发送验证码参数
    const params = {
        bankAccount: form.yhkh, //银行卡卡号
        userMobile: form.phone, //手机号
        cardBin: form.bankId, //银行卡卡bin
        bankName: form.khyh,
        loginNo: props.query.loginNo,
        paySequenceNo: props.query.paySequenceNo
    };
    await formRef.value.validateField('phone');
    await formRef.value.validateField('yhkh');
    await request('personSmscode', params);
    countdownHandler();
});
// 卡宾
const bankNoCheckHandler = async () => {
    if (!form.yhkh) {
        return;
    }
    const { data } = await request('identifyBankCardServ', { cardNo: form.yhkh });
    form.khyh = data?.bankDescription;
    form.bankId = data?.bankId;
    formRef.value.validateField('khyh');
};
// 重发短信
const reSendNessage = throttle(async () => {
    await request('bindPersonCardServ', {
        pageUrl: 'https://home.shop.keyid.cn/',
        bankName: form.khyh, //开户名称
        bankAccount: form.yhkh, //银行卡号
        userMobile: form.phone, //联系人手机号
        verifyCode: form.yzm, //短信验证码
        cardBin: 'CMB',
        loginNo: props.query.loginNo,
        paySequenceNo: props.query.paySequenceNo
    });
    ElMessage.success('短信已发送~');
});
const successHandler = async () => {
    // 获取步骤详情数据
    const { code, data, msg } = await request('baofuAccountInfoServ', { loginNo: props.query.loginNo });
    if (code === 0) {
        data.accountStatus == 8 ? emit('stepChange') : ElMessage.error('请先点击短信链接，进行绑卡签约~');
    } else {
        ElMessage.error(msg);
    }
};
onMounted(async () => {
    const { data } = await request('personBindCardInfoServ', {
        loginNo: props.query.loginNo,
        paySequenceNo: props.query.paySequenceNo
    });
    form.yhkh = data.bankAccount;
    form.khyh = data.bankName;
    form.phone = data.userMobile;
    form.bankId = data.cardBin;
    if (data.cardBin == 'CMB' && data.msgCode == 1) {
        dialog.verification = true;
    }
});
</script>
<style lang="scss" scoped>
.linkcard-content {
    margin-top: 66px;

    .custom-all {
        margin-bottom: 16px;
        .custom-des {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .custom-alert {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: inline-block;
            width: 150px;
            padding-right: 12px;
            text-align: right;
            box-sizing: border-box;
            &::before {
                content: '*';
                color: red;
                margin-right: 4px;
            }
        }
    }

    .el-row {
        display: flex;
        justify-content: center;
        margin-bottom: 74px;
    }
    .item-position {
        position: relative;
        .custom-code {
            cursor: pointer;
            position: absolute;
            right: 12px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6b00ff;
        }
        .custom-code::before {
            content: '';
            padding-left: 8px;
            height: 12px;
            border-left: 2px solid #999999ff;
        }
    }

    .custom-link {
        cursor: pointer;
        width: 168px;
        height: 32px;
        background: #ff6b00;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 32px;
        text-align: center;
        margin: 0 auto;
    }
    .dialog_verifi {
        margin-bottom: 30px;

        text-align: center;

        font-size: 15px;

        line-height: 20px;
        .sure_btn {
            width: 160px;

            margin: 30px auto 15px;

            padding: 8px 15px;

            cursor: pointer;

            color: #ffffff;

            border-radius: 3px;

            background-color: #ff6b00;
        }

        .re_btn {
            cursor: pointer;

            color: #ff6b00;
        }

        .dialog_tip {
            font-size: 13px;
        }
    }
}
</style>
